<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<title>文件上传学习</title>
<link href="/css/main.css" rel="stylesheet">
</head>
<body>
	<div>
		<!-- 声明其它要附带上传的值 -->
		username: <input id="username" name="username" value="太好了" /><br/>
		password: <input id="password" name="password" value="123456" />
	</div>
	<div>
		<input type="file" name="file" id="file">
		<button id="btn_upload">上传</button>
	</div>
	<div>
		<textarea id="msg" style="height: 200px;width: 100%;"></textarea>
	</div>
	<div>
		<a href="" target="_blank" id="href"></a>
	</div>
	<div id="copyright">kkkkkkkkkkkkkkkkk</div>
</body>
</html>
<script src="../../js/jquery.3.2.1.min.js"></script>
<script src="../../js/main.js"></script>
<script>
	//直接取
	var conf;
	if(!sessionStorage['conf']){
		alert('浏览器没有缓存配置');
		conf = doHttp('get', '/base/getConfig', {});
	}else{
		conf = JSON.parse(sessionStorage['conf']);
	}

	//把配置丢到浏览器里面，一定不是对象，如果是对象，必须转换为文本
	sessionStorage['conf'] = JSON.stringify(conf);

	//从浏览器缓存里面取配置，如果取的是对象，要用JSON.parse()把它分析出来
	var c = JSON.parse(sessionStorage['conf']);
	//alert(c.copyright);
	sessionStorage['username'] = 'administrator';
	//存储单值
	var username = sessionStorage['username'];
	//alert(username);
	$('#copyright').html(conf.copyright);
	console.log(conf);
	var user = doHttp('get', '/base/findById', {id: '007'});
	console.log(user);
	//alert("user = " + JSON.stringify(user));
	$("#btn_upload").click(function() {
		if ($('#file').val() == ``) {
			alert('请选择文件！');
			return;
		}
		//把要上传的文件及其它数据加进FormData
		var formData = new FormData();
		formData.append("file", $('#file')[0].files[0]);//file标签的第1个文件
		formData.append("username", $('#username').val());
		formData.append("password", $('#password').val());
		console.log(JSON.stringify(formData));
		//开始上传
		$.ajax({
			url : '/file/upload',
			dataType : 'json',
			type : 'post',
			async : false,
			data : formData, //JSON
			processData : false, // 使数据不做处理
			contentType : false, // 不要设置Content-Type请求头
			success : function(data) {//回调函数
				console.log(data);//在后台打印，可以直接输出JSON数据，包括数组
				//alert(data);
				$('#msg').val(JSON.stringify(data));//给一个textarea填充数据
				$('#file').val('');
				//$('#href').attr('href', data.fullUrl);
				$('#href').attr('href', `${conf.filesRootUrl}${data.url}`);
				$('#href').text(`查看/下载【${data.name}】`);
				//重点：采用新方法来引用${data.key}
			},
			error : function(response) {
				console.log(response);
			}
		});
	});
</script>